<template>
    <div style="width: 1400px; margin-left: 10px">
        <h2 style="text-align: left; margin-left: 15px; font-size: 20px;">{{ title }}</h2>
    
          <el-row :gutter="24">
            <el-col :span="6"  v-for="item in songMv" :key="item.id">
              <el-card shadow="hover" :body-style="{ padding: '0px', height: '180px' }"> 
                    <el-image fit="cover" :src="item.picUrl" />
                    <h1>{{item.name}}</h1>
                 </el-card>  
            </el-col>
        </el-row>
      </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import {useStore} from 'vuex';

export default defineComponent({
    name: "MvList",
    setup(){
        const title = "推荐MV>";
        const store = useStore();

        store.dispatch('contaniner/songMv')
        return {
            title,
            songMv: computed( ()=> store.state.contaniner.songMv)
        };
    }


})

</script>
<style lang="less" scoped>

</style>
